<!--
 * @Description: 
 * @Version: 1.0
 * @Autor: younghxp
 * @Date: 2021-11-17 09:31:50
 * @LastEditors: younghxp
 * @LastEditTime: 2021-12-09 16:00:01
-->
<template>
  <div class="container" ref="mainCon">
    <div class="title">
      <div class="descBox">
        <p class="companyname">
          <i class="icon iconfont iconfanhui1" @click="goBack"></i>
          {{ projectInfo.projectName }}
        </p>
        <p class="projectInfo">
          <span class="line"
            >建档日期：{{ projectInfo.createTime || '--' }}</span
          >
          <span class="line"
            >开工日期：{{ projectInfo.startDate || '--' }}</span
          >
          <span
            >建设周期：{{
              projectInfo.cycle === null ? '-- ' : projectInfo.cycle
            }}天</span
          >
        </p>
      </div>
    </div>
    <div class="companyInfo">
      <div class="subBox">
        <i :class="iconClass"></i>
        <div class="descBox">
          <p class="companyname">
            {{ companyProjectScore.companyName }}
            <span class="statusDescTheme fontColorTheme fontBorderTheme">{{
              companyProjectScore.typeDesc
            }}</span>
          </p>
          <p class="usccDesc">
            统一社会信用代码：{{ companyProjectScore.uscc || '--' }}
          </p>
        </div>
      </div>
    </div>
    <div class="spacing"></div>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth">
        <el-form :inline="true" :model="filterField" ref="searchConditions">
          <el-col :lg="8" :xl="6">
            <el-form-item label="评价日期" class="row-padding-bottom">
              <timeSelection
                :startTime="filterField.startDate"
                :endTime="filterField.endDate"
                @getStartTimeValue="getStartTimeValue"
                @getEndTimeValue="getEndTimeValue"
              ></timeSelection>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="信用等级" class="row-padding-bottom">
              <el-select
                v-model="filterField.gradeLevel"
                filterable
                placeholder="请选择"
                clearable
              >
                <el-option
                  v-for="item in selectLevel"
                  :key="item.gradeLevel"
                  :label="item.name"
                  :value="item.gradeLevel"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
              <el-button
                type="primary"
                icon="icon iconfont icondaochu"
                @click="getExportList"
                class="searchBtn"
              >
                <span>导出</span>
              </el-button>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <!-- <div class="spacing"></div> -->
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          v-loading="loading"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="creditDate"
            label="评价日期"
            min-width="28"
          ></el-table-column>
          <el-table-column
            prop="score"
            label="动态信用分数"
            min-width="28"
            align="center"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            label="动态信用等级"
            min-width="28"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              {{ scope.row.gradeLevel === 'O' ? '其他' : scope.row.gradeLevel }}
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            min-width="14"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="toDetail(scope.row)"
                >查看详情</el-link
              >
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无企业评级相关数据"></emptyTable>
          </div>
        </el-table>
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
          @getpageNo="getpageNo"
          @getpageSize="getpageSize"
        ></Pagination>
      </div>
    </div>
  </div>
</template>

<script>
import common from '../../kits/common'
import scrollTable from '@/mixin/scrollTable.js'
export default {
  name: 'enterpriseHistoryScoreListXM',
  mixins: [scrollTable],
  data() {
    return {
      advanced: false,
      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          // 只能选择昨天以及以前
          return date.getTime() > Date.now() - 24 * 60 * 60 * 1000
        },
      },
      selectLevel: [],
      //表格数据
      tableList: [],
      requestUrl: 'api-ps/creditComProjScore/expand/histroy',
      //搜索条件
      filterField: {
        uscc: '',
        projectId: '',
        type: '5',
        startDate: '',
        endDate: '',
        gradeLevel: '',
      },
      pageSize: 20,
      pageNo: 1,
      isShow: false,
      loading: false,
      companyProjectScore: {},
      projectInfo: {},
    }
  },
  async created() {
    this.filterField.projectId = this.$store.state.projectId
    this.filterField.uscc = this.$route.query.uscc
    this.getLevelList(this.filterField.type)
    this.getProjectDetail(this.filterField.projectId)
  },
  mounted() {
    this.$nextTick(function () {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    })
  },
  computed: {
    iconClass() {
      if (this.filterField.type === '0') {
        return 'iconfont iconjianshedanwei'
      } else if (this.filterField.type === '5') {
        return 'iconfont iconshigongdanwei'
      } else if (this.filterField.type === '10') {
        return 'iconfont iconfenbaodanwei'
      } else {
        return
      }
    },
  },
  methods: {
    getpageSize(val) {
      this.pageSize = val
    },
    getpageNo(val) {
      this.pageNo = val
    },
    getStartTimeValue(val) {
      if (val) {
        this.filterField.startDate = val
      } else {
        this.filterField.startDate = ''
      }
    },
    getEndTimeValue(val) {
      if (val) {
        this.filterField.endDate = val
      } else {
        this.filterField.endDate = ''
      }
    },
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    // 项目端获取项目评分详情
    getProjectDetail(projectId) {
      this.axios({
        method: 'post',
        url: 'api-ps/creditComprojScorDel/expand/getCompanyProjectScoreDetailByProjectAccount',
        data: {
          projectId,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            const { result } = response.data
            this.projectInfo = result.project
            this.companyProjectScore = result.companyProjectScore
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 获取评级配置
    getLevelList(type) {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditLevel/expand/getCreditLevelList',
        data: {
          type,
        },
      })
        .then((response) => {
          if (response.data.hasError) {
            this.$message.error(response.data.errorMsg)
          } else {
            const results = response.data.result
            results.forEach((v) => {
              v.name = v.gradeLevel
            })
            this.selectLevel = results
            const otherLevel = { gradeLevel: 'O', name: '其他' }
            this.selectLevel.push(otherLevel)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    searchList() {
      this.$refs.pagination.getTableListData(this.pageNo, this.pageSize)
    },
    // 是否有导出数据
    getExports() {
      return this.axios({
        method: 'post',
        url: 'api-ps/creditComProjScore/expand/histroy',
        data: this.filterField,
      })
        .then((response) => {
          if (!response.data.hasError) {
            return response.data.result.results &&
              response.data.result.results.length > 0
              ? true
              : false
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    /**
     * @description: 导出
     */
    async getExportList() {
      const flag = await this.getExports()
      let { projectId, type, uscc, startDate, endDate, gradeLevel } =
        this.filterField
      gradeLevel && (gradeLevel = encodeURIComponent(gradeLevel))
      if (flag) {
        window.location.href =
          common.commonApi +
          'api-ps/creditComProjScore/expand/histroy/export?projectId=' +
          projectId +
          '&type=' +
          type +
          '&uscc=' +
          uscc +
          '&startDate=' +
          startDate +
          '&endDate=' +
          endDate +
          '&gradeLevel=' +
          gradeLevel +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message.warning('暂无数据导出')
      }
    },
    toDetail(row) {
      let path = '/home/enterpriseScore/scoreDetail'
      let name = 'scoreDetail'
      if (this.isEsUser()) {
        path = '/home/enterpriseScore/ESscoreDetail'
        name = 'ESscoreDetail'
      }
      this.$router.push({
        path,
        name,
        query: {
          companyProjectScoreId: row.id,
          type: row.type,
          projectId: row.projectId,
          uscc: row.uscc,
          year: row.year,
          month: row.month,
          day: row.day,
          fromPath: 'enterpriseHistoryScoreListXM',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/enterpriseScore/scoreDetail',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    goBack() {
      let path = '/home/enterpriseScore/scoreDetail'
      let name = 'scoreDetail'
      let oldUrl = '/home/enterpriseScore/scoreDetail'
      if (this.isHsUser()) {
        path = '/home/enterpriseScore/HSscoreDetail'
        name = 'HSscoreDetail'
        oldUrl = '/home/enterpriseScore/HSscoreDetail'
      }
      if (this.isEsUser()) {
        path = '/home/enterpriseScore/ESscoreDetail'
        name = 'ESscoreDetail'
        oldUrl = '/home/enterpriseScore/ESscoreDetail'
      }
      this.$router.push({
        path,
        name,
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl,
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style scoped lang="less">
@import '../../../static/css/filterArea.less';
.container {
  background-color: #f5f7fa;
  .title {
    height: 78px;
    font-size: 0;
    background-color: #fff;
    padding: 0 24px;
    position: relative;
    .descBox {
      display: inline-block;
      .companyname {
        font-size: 18px;
        color: #333;
        font-weight: 700;
        margin-top: 12px;
        .iconfanhui1 {
          margin-right: 0;
          position: relative;
          top: -1px;
        }
      }
      .projectInfo {
        font-size: 0;
        line-height: 14px;
        padding-left: 24px;
        margin-top: 10px;
        .line {
          border-right: 1px solid #aaa;
        }
        span {
          display: inline-block;
          font-size: 14px;
          color: #666666;
          font-weight: 400;
          padding-right: 10px;
          margin-right: 10px;
        }
      }
    }
    &::after {
      content: '';
      width: calc(100%);
      height: 1px;
      -webkit-transform: scaleY(0.5);
      transform: scaleY(0.5);
      background-color: #e3e7e9;
      position: absolute;
      left: 0;
      top: 100%;
    }
  }
  .companyInfo {
    height: 122px;
    font-size: 0;
    background-color: #fff;
    padding: 24px;
    .subBox {
      height: 100%;
      padding-left: 24px;
      background-color: #f5f7fa;
      .iconfont {
        display: inline-block;
        font-size: 18px;
        color: #0f76c4;
        vertical-align: top;
        margin-top: 16px;
        margin-right: 10px;
      }
      .descBox {
        display: inline-block;
        .companyname {
          font-size: 18px;
          color: #242c3b;
          font-weight: 700;
          margin-top: 14px;
          .statusDescTheme {
            display: inline-block;
            width: 48px;
            height: 20px;
            font-size: 12px;
            color: #265faa;
            font-weight: 400;
            text-align: center;
            line-height: 20px;
            border: 1px solid #265faa;
            background-color: #fff;
            vertical-align: top;
            margin-top: 3px;
            margin-left: 5px;
          }
        }
        .usccDesc {
          font-size: 14px;
          color: #666666;
          font-weight: 400;
          line-height: 28px;
        }
      }
    }
  }
  .mainCon {
    .tableBoxCur {
      padding-top: 0;
    }
    /deep/ .clearfix {
      padding-bottom: 16px;
    }
  }
}
</style>
